// 子组件
// src\components\Icon\Icon.vue

<template>
  <!-- Icon组件 -->
  <div>
    <svg :class="svgClass" aria-hidden="true" @click="clickIcon"  :style="{ width: width + 'px', height: height + 'px' ,transform:`rotate(${transfrom}deg)`}" >
      <use :xlink:href="iconName"></use>
  </svg>
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits } from 'vue';

const props = defineProps({
  svgClass: {
    type: String,
    default: '', // 默认值
  },
  iconName: {
    type: String,
    required: true // 必传
  },
  width: {
    type: Number,
    default: 40 // 默认宽度
  },
  height: {
    type: Number,
    default: 40 // 默认高度
  },
  transfrom:{
    type :Number,
    default:0 // 默认翻转度
  }
});

const svgClass = ref(`icon ${props.svgClass}`);
const iconName = ref(`#${props.iconName}`);

const emit = defineEmits(['clickIcon']); // 引入emit  
const clickIcon = () => {
  emit('clickIcon');
};
</script>

<style lang="scss" scoped>
.icon {
  margin-right: -9px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  cursor: pointer;
  color: rgb(197, 10, 10);
  background-color: rgb(59, 120, 197,0.6);
  border-radius: 2px;
  transition-duration: 1s;
    &:hover {
    color: rgb(197, 135, 41) ;
  }
}
</style>
